<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>HelloWorld</title>
    <script src="lib/angular.js"></script>
</head>
<body>
    <input ng-model="name" type="text" placeholder="Your name">
    <h1>Hello {{ name }}</h1>

    <div ng-controller='MyController'>
        <h1>Hello {{ clock.now }}!</h1>
    </div>

    <div ng-controller='ChildController'>
        <h2>Hello {{ person }}!</h2>
    </div>

    <script type="text/javascript">
        var app = angular.module('myApp', []);

        app.controller('MyController',
            function($scope) {
                $scope.clock = {
                    now: new Date()
                };
                var updateClock = function() {
                    $scope.clock.now = new Date()
                };
                setInterval(function() {
                    $scope.$apply(updateClock);
                }, 1000);
                updateClock();
            }
        );
        
        app.controller('ParentController', function($scope) {
            $scope.person = {greeted: false};
        });
        app.controller('ChildController', function($scope) {
            $scope.person = {name: 'CG'};
            console.log("person: " + $scope.person.greeted);
        });
    </script>
</body>
</html>